import { FC, useRef, useState } from "react"
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import style from './style.less'
import selected from '../../resource/select.png'
import { Swiper, SwiperItem } from '@tarojs/components'
import have from '../../resource/have.png'
import used from '../../resource/used.png'
import table from '../../resource/table.png'
import { OpenData } from "@tarojs/components"

const Member: FC = () => {
  const router = useRouter()
  const status = Number(router.params.status)

  const [select, setSelect] = useState(status)
  const [current, setCurrent] = useState(status)
  const [subSelect, setSubSelect] = useState(1)
  const [subSelect2, setSubSelect2] = useState(1)

  const [isShow, setIsShow] = useState(false)

  const [member, setMember] = useState<any>({ membershipType: '000', coupons: [{}, {}, {}] })

  const name = useRef('冷链')

  useDidShow(() => {
    Taro.showLoading({ title: '加载中' })
    Taro.request({
      url: 'http://139.9.123.88:8080/fta-usercenter/membership/driverImmediateRenewShow',
      method: 'POST',
      data: JSON.stringify({
        token: Taro.getStorageSync('token'),
      }),
      success: (data) => {
        console.log('会员', data);
        setMember(data.data.data)
        Taro.hideLoading()
      },
      fail: () => {
        Taro.hideLoading()
        console.log('请求会员失败');
      }
    })
  })

  const handleChange = (e) => {
    setSelect(e.detail.current)
  }

  const copyToBoard = () => {
    Taro.navigateTo({ url: '/packageD/appointment/index' })
    // Taro.setClipboardData({
    //   data: 'http://www.ihealthink.com/healthcenter/healthexam/bespeak_form.html?datetime=1536646553837',
    //   success: function (res) {
    //     console.log(res);
    //     // Taro.getClipboardData({
    //     //   success: function (res) {
    //     //     console.log(res.data) // data
    //     //   }
    //     // })
    //   }
    // })
  }

  return (
    <div className={style.root}>
      <div className="mask" style={{ display: isShow ? 'block' : 'none' }}>
        <div className="applyBox">
          <div className="addr">新建地址</div>
          <div className="cancel" onClick={() => { setIsShow(false) }}>取消</div>
          <input type="text" placeholder="收货人姓名（请使用真实姓名）" />
          <input type="number" maxLength={11} placeholder="手机号码" />
          <input type="text" placeholder="所在地区" />
          <input type="text" placeholder="街道、小区门牌等详细地址" />
          <div className="applyEquip" onClick={() => {
            Taro.setStorageSync(name.current, 1)
            setIsShow(false)
            Taro.showToast({
              title: '提交成功',
              icon: 'none',
              duration: 1500
            })
          }}>提交申请</div>
        </div>
      </div>
      <div className="header">
        <div className="user-info">
          <div className="img">
            <OpenData type="userAvatarUrl" />
          </div>
          <div className="login">
            <OpenData type="userNickName" />
          </div>
          {member.membershipType[0] === '0' && member.membershipType[1] === '0' && member.membershipType[2] === '0' && <div className="desc">暂未开通会员</div>}
          <div className="desc">
            {member.membershipType[0] === '1' && <div>会员</div>}
            {member.membershipType[2] === '1' && <div>冷链</div>}
            {member.membershipType[1] === '1' && <div>保油</div>}
          </div>
        </div>
        <Swiper
          className="swiper"
          indicatorDots
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          current={current}
          onChange={handleChange}
        >
          <SwiperItem>
            <div className="vip-card" style={{ backgroundImage: 'linear-gradient(to bottom right, #e9ddcc, #F4CF89)' }}>
              <div>尊享会员</div>
              {member.membershipType[0] === '1' ? <div>到期时间： {member.normalEndTime}</div> : <div>开通后可享3个月会员权限</div>}
              <div>¥ 218</div>
              {member.membershipType[0] === '1' ? <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=4&renew=1&amount=218' }) }}>立即续费</div> :
                <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=4&renew=0&amount=218' }) }}>立即开通</div>}
            </div>
          </SwiperItem>
          <SwiperItem>
            <div className="vip-card" style={{ backgroundImage: 'linear-gradient(to bottom right, #f5ece1, #f1dcbe)' }}>
              <div>冷链权益</div>
              {member.membershipType[2] === '1' ? <div>到期时间： {member.coldEndTime}</div> : <div>开通后可享3个月冷链权益</div>}
              <div>¥ 358</div>
              {member.membershipType[2] === '1' ? <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=1&amount=358' }) }}>立即续费</div> :
                <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=1&renew=0&amount=358' }) }}>立即开通</div>}
            </div>
          </SwiperItem>
          <SwiperItem>
            <div className="vip-card" style={{ backgroundImage: 'linear-gradient(to bottom right, #faefec, #F2D3CB)' }}>
              <div>保油权益</div>
              {member.membershipType[1] === '1' ? <div>到期时间： {member.oilEndTime}</div> : <div>开通后可享3个月保油权益</div>}
              <div>¥ 328</div>
              {member.membershipType[1] === '1' ? <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=1&amount=328' }) }}>立即续费</div> :
                <div onClick={() => { Taro.navigateTo({ url: '/packageD/pay/index?status=2&renew=0&amount=328' }) }}>立即开通</div>}
            </div>
          </SwiperItem>
        </Swiper>
      </div>
      <div style={{ display: select === 0 ? 'block' : 'none' }}>
        {
          member.membershipType[0] === '1' ? (
            <>
              <div className="box3">
                <div className="box3-num">特权1</div>
                <div className="box3-title">免技术服务费</div>
                <div className="box3-desc">剩余次数：{member.freeTimes}次</div>
              </div>
              <div className="box3">
                <div className="box3-num">特权2</div>
                <div className="box3-title">货源优先抢</div>
                <div className="box3-desc" onClick={() => { Taro.navigateTo({ url: '/packageD/chart/index' }) }}>点击查看发货预测 {'>'}</div>
              </div>
              <div className="box3" style={{ height: Taro.pxTransform(680) }}>
                <div className="box3-num">特权3</div>
                <div className="box3-title">优享货运券</div>
                <div className="box3-desc">当月已跑 {member.monthMileage} 里程</div>
                <div className="box3-container">
                  <div className="box3-item">
                    <div className="boxDiscount"><i>¥</i> 10</div>
                    <div className="boxName">货运券</div>
                    <div className="boxDesc">仅限抵扣技术服务费</div>
                    <img style={{ display: member.coupons[0].couponId === null ? 'block' : 'none' }} src={member.coupons[0].isValid ? have : used} alt="" />
                    {member.coupons[0].couponId === null ? member.coupons[0].isValid ? <div className="boxTips">有效期：{member.coupons[0].beginTime.substr(0, 10)}至{member.coupons[0].endTime.substr(0, 10)}</div> :
                      <div className="boxTips">已使用</div> :
                      <div className="boxTips">距离您获得此券还需跑{member.coupons[0].couponId}公里</div>
                    }
                  </div>
                  <div className="box3-item">
                    <div className="boxDiscount"><i>¥</i> 20</div>
                    <div className="boxName">货运券</div>
                    <div className="boxDesc">仅限抵扣技术服务费</div>
                    <img style={{ display: member.coupons[1].couponId === null ? 'block' : 'none' }} src={member.coupons[1].isValid ? have : used} alt="" />
                    {member.coupons[1].couponId === null ? member.coupons[1].isValid ? <div className="boxTips">有效期：{member.coupons[1].beginTime.substr(0, 10)}至{member.coupons[1].endTime.substr(0, 10)}</div> :
                      <div className="boxTips">已使用</div> :
                      <div className="boxTips">距离您获得此券还需跑{member.coupons[1].couponId}公里</div>
                    }
                  </div>
                  <div className="box3-item">
                    <div className="boxDiscount"><i>¥</i> 30</div>
                    <div className="boxName">货运券</div>
                    <div className="boxDesc">仅限抵扣技术服务费</div>
                    <img style={{ display: member.coupons[2].couponId === null ? 'block' : 'none' }} src={member.coupons[2].isValid ? have : used} alt="" />
                    {member.coupons[2].couponId === null ? member.coupons[2].isValid ? <div className="boxTips">有效期：{member.coupons[2].beginTime.substr(0, 10)}至{member.coupons[2].endTime.substr(0, 10)}</div> :
                      <div className="boxTips">已使用</div> :
                      <div className="boxTips">距离您获得此券还需跑{member.coupons[2].couponId}公里</div>
                    }
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="box">
                <div className="box-num">特权1</div>
                <div className="box-title">免技术服务费</div>
                <div className="box-body1">
                  <img src={selected} alt="" />
                  <div>10次/季度，不可叠加</div>
                </div>
                <div className="box-body2">
                  <img src={selected} alt="" />
                  <div>在下单页面，可直接免技术服务费</div>
                </div>
              </div>
              <div className="box">
                <div className="box-num">特权2</div>
                <div className="box-title">货源优先抢</div>
                <div className="box-body1">
                  <img src={selected} alt="" />
                  <div>可查看发货预测图</div>
                </div>
                <div className="box-body2">
                  <img src={selected} alt="" />
                  <div>当日发货量最高时段优先知</div>
                </div>
              </div>
              <div className="box" style={{ height: Taro.pxTransform(635) }}>
                <div className="box-num">特权3</div>
                <div className="box-title">优享货运券</div>
                <div className="box-body1">
                  <img src={selected} alt="" />
                  <div>在下单页面，可抵扣一定技术服务费</div>
                </div>
                <div className="box-body2">
                  <img src={selected} alt="" />
                  <div className="tequan3">自您开通会员起，一个月内，当您的总里程数达到<i>1200公里/月</i>时，我们将给您赠送不同额度的货运券，货运券有效期为一个月。</div>
                  <img className="image" src={table} alt="" />
                </div>
              </div>
            </>
          )
        }
      </div>
      <div className="box2" style={{ display: select === 1 ? 'block' : 'none', height: member.membershipType[2] === '1' ? Taro.pxTransform(930) : Taro.pxTransform(830) }}>
        <div className="box2-title">
          <div className="container1">
            <div style={{ color: subSelect === 1 ? "#F4CF89" : "#9F9F9F" }} onClick={() => { setSubSelect(1) }}>冷链运输</div>
            <div style={{ color: subSelect === 2 ? "#F4CF89" : "#9F9F9F" }} onClick={() => { setSubSelect(2) }}>送健康险</div>
          </div>
          <div className="container2">
            <div style={{ visibility: subSelect === 1 ? "visible" : "hidden" }} onClick={() => { setSubSelect(1) }} />
            <div style={{ visibility: subSelect === 2 ? "visible" : "hidden" }} onClick={() => { setSubSelect(2) }} />
          </div>
        </div>
        {subSelect === 1 ? (
          <div className="box2-body">
            <div className="box2-body-container">
              <div>权益一</div>
              <div>送冷链车载温湿度计</div>
            </div>
            <div className="section">购买该权益后，送冷链车载温湿度计，我们将有专业团队指导安装。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">该设备可进行冷链运输中的参数监控，包括车厢内的温湿度、实时定位等信息。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">当车辆温湿度异常后，可进行告警，以短信或者电话的方式通知您，帮助您实时保证车辆参数正常。</div>
            <img src="https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1635757533839.png?x-oss-process=image/resize,w_300" alt="" />
            {member.membershipType[2] === '1' && subSelect === 1 && <div className={Taro.getStorageSync('冷链') === 1 ? 'applyed' : 'apply'} onClick={() => { if (Taro.getStorageSync('冷链') !== 1) { name.current = '冷链', setIsShow(true) } }}>{Taro.getStorageSync('冷链') === 1 ? '您已申请了冷链设备' : '申请冷链设备'}</div>}
          </div>
        ) : (
          <div className="box2-body">
            <div className="box2-body-container">
              <div>权益二</div>
              <div>送个人意外险和体检服务</div>
            </div>
            <div className="section">免费给您赠送个人意外险，自您购买会员次日起生效，最高可获赔100万。自会员失效日次日失效，不可转增。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">免费给您赠送体检服务，自您购买会员日起生效，一年中可享两次免费体检机会，时间不限，不可转赠。</div>
            <img style={{ marginTop: Taro.pxTransform(40) }} src="https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1635757500775.png?x-oss-process=image/resize,w_300" alt="" />
            {member.membershipType[2] === '1' && subSelect === 2 && <div className="apply" style={{ marginTop: Taro.pxTransform(80) }} onClick={copyToBoard}>去预约</div>}
          </div>
        )}
      </div>
      <div className="box2" style={{ display: select === 2 ? 'block' : 'none', height: member.membershipType[1] === '1' ? Taro.pxTransform(930) : Taro.pxTransform(830) }}>
        <div className="box2-title">
          <div className="container1">
            <div style={{ color: subSelect2 === 1 ? "#F4CF89" : "#9F9F9F" }} onClick={() => { setSubSelect2(1) }}>保油服务</div>
            <div style={{ color: subSelect2 === 2 ? "#F4CF89" : "#9F9F9F" }} onClick={() => { setSubSelect2(2) }}>送健康险</div>
          </div>
          <div className="container2">
            <div style={{ visibility: subSelect2 === 1 ? "visible" : "hidden" }} onClick={() => { setSubSelect2(1) }} />
            <div style={{ visibility: subSelect2 === 2 ? "visible" : "hidden" }} onClick={() => { setSubSelect2(2) }} />
          </div>
        </div>
        {subSelect2 === 1 ? (
          <div className="box2-body">
            <div className="box2-body-container">
              <div>权益一</div>
              <div>送超声波油耗传感器</div>
            </div>
            <div className="section">购买该权益后，送超声波油耗传感器，我们将有专业团队指导安装。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">该监控设备可进行运输中的油耗监控，记录行驶车的油量下降速度。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">安装本监控设备后，当油量以异常的速度下降时，可给司机提供告警进行提醒查看，防止油被非法窃取。</div>
            <img src="https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1635758201298.png?x-oss-process=image/resize,w_300" alt="" />
            {member.membershipType[1] === '1' && subSelect2 === 1 && <div className={Taro.getStorageSync('保油') === 1 ? 'applyed' : 'apply'} onClick={() => { if (Taro.getStorageSync('保油') !== 1) { name.current = '保油', setIsShow(true) } }}>{Taro.getStorageSync('保油') === 1 ? '您已申请了保油设备' : '申请保油设备'}</div>}
          </div>
        ) : (
          <div className="box2-body">
            <div className="box2-body-container">
              <div>权益二</div>
              <div>送个人意外险和体检服务</div>
            </div>
            <div className="section">免费给您赠送个人意外险，自您购买会员次日起生效，最高可获赔100万。自会员失效日次日失效，不可转增。</div>
            <div style={{ height: Taro.pxTransform(15) }} />
            <div className="section">免费给您赠送体检服务，自您购买会员日起生效，一年中可享两次免费体检机会，时间不限，不可转赠。</div>
            <img style={{ marginTop: Taro.pxTransform(40) }} src="https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1635757500775.png?x-oss-process=image/resize,w_300" alt="" />
            {member.membershipType[1] === '1' && subSelect === 2 && <div className="apply" style={{ marginTop: Taro.pxTransform(80) }} onClick={copyToBoard}>去预约</div>}
          </div>
        )}
      </div>
    </div>
  )
}

export default Member